<template>
    <div class="men">
     <img src="http://cdn13.mei.com/category/20181027/d0de04c21e26224e25e18969b9c6784925aecd78fee7fcaf.jpg" alt="" class="ban">
     <ul>
         <li v-for="data1 in classlist" :key="data1.categoryTwoId">
             <img :src="data1.categoryImgStr" alt="">
         </li>
     </ul>
      <div
        class="pros"
        >
        <Pros :pro="list"></Pros>
      </div>
      <FooterPublic></FooterPublic>
    </div>
</template>
<script>
import { instance } from '@/utils/http'
import Vue from 'vue'
import Pros from '@/components/Pros'
import FooterPublic from '@/components/FooterPublic'
export default {
  data () {
    return {
      list: [],
      classlist: []
    }
  },
  components: {
    Pros,
    FooterPublic
  },
  created () {
    instance.get('/appapi/silo/eventForH5?categoryId=cosmetics&pageIndex=1&timestamp=1586397597233&summary=d29d4aa24e4cc9f75e4f40c34ebf501a&platform_code=H5')
      .then(res => {
        this.list = res.data.eventList
      }),
    instance.get('/appapi/cms/cmsDetail/v3?silo=2013000100000000003&ids=2042000100000000431&timestamp=1586398248851&summary=b2d76e1c2e616e9f8be323f07d2ebdad&platform_code=H5')
      .then(res => {
        this.classlist = res.data.resultList[0].data
      })
  }

}
</script>
<style lang="scss" scoped>
.ban{
    width: 100%;
    height: 4.5rem;
    display: block;
}
.crossborder {
  .pros {
    padding: .2rem .16rem;
    h4 {
      margin-bottom: .2rem;
      font-size: .2rem;
      color: black;
    }
  }
}
ul{
    display: flex;
    height: 100px;
    justify-content: space-between;
    padding: 5px 10px;
    li{
       margin-left: 4px;
        img{
            width: 100%;
        }
    }
}
</style>
